<template>
  <div class="detail">
    <section
      class="topKHYItem"
      v-if="$route.query.appCode.indexOf('KHY') > -1 || $route.query.appCode.indexOf('WMR') > -1"
    >
      <el-row>
        <el-col :span="22">
          <div>流水号：{{ routeData.applyNo }}</div>
        </el-col>
        <el-col :span="2">
          <!-- // step1：提交授信信息；step2：银行审核；step3：审核不通过；step4：审核通过；step5：已签约 -->
          <!-- <el-button type="primary" v-if="platformStatus == 0" class="btn" @click="audit">审核</el-button> -->
        </el-col>
        <el-col :span="8">
          <div>所属项目：{{ routeData.appName }}</div>
        </el-col>
        <el-col :span="8"> 企业名称：{{ routeData.tenantName }} </el-col>
        <el-col :span="8">产品名称：{{ routeData.productName }}</el-col>
        <el-col :span="8">资金方：{{ routeData.fundName }}</el-col>
        <el-col :span="8">受理日期：{{ routeData.startDate }}</el-col>
        <el-col :span="8">受理状态：{{ this.statusMap[routeData.status] }}</el-col>
      </el-row>
    </section>
    <section class="detail-block">
      <h6 class="detail-block__title">企业信息</h6>
      <nav class="common-nav mb20">
        <h2
          style="width: 120px"
          class="common-nav__title"
          :class="index === activeIndex ? 'tab_active' : ''"
          @click="switchNav(item, index)"
          v-for="(item, index) in navList"
          :key="index"
        >
          {{ item.name }}
        </h2>
      </nav>
      <main class="detail-block__container">
        <ApplyNote :applyInfo="applyInfo" v-show="activeIndex === 0"></ApplyNote>
        <CertificationInfo :certificationInfo="applyInfo" v-show="activeIndex === 1"></CertificationInfo>
        <EnterpriseInfo :enterpriseInfo="enterpriseInfo" v-show="activeIndex === 2"></EnterpriseInfo>
      </main>
    </section>

    <!-- 区别来源是金赋水还金茂融 -->
    <section v-if="$route.query.appCode === 'JFS'">
      <nav class="common-nav mb20">
        <h2 style="width: 136px" class="common-nav__title tab_active">全部订单</h2>
      </nav>
      <BaseSearch :config="searchConfig" v-bind="form" ref="search"></BaseSearch>
      <BaseTable :columns="columns" v-bind="table">
        <template slot="paymentStatus" slot-scope="scope">
          <span class="mr5">{{ ORDER_STATUS[scope.row.paymentStatus] }}</span>
          <el-tooltip
            v-if="scope.row.paymentStatus"
            class="item"
            effect="dark"
            :content="ORDER_STATUS[scope.row.paymentStatus]"
            placement="top"
          >
            <i class="el-icon-question"></i>
          </el-tooltip>
        </template>
      </BaseTable>
    </section>
    <!-- 外贸融 -->
    <section v-if="$route.query.appCode === 'WMR'">
      <RiskControl></RiskControl>
    </section>
    <!-- 快货运数据 -->
    <section v-if="$route.query.appCode.indexOf('KHY') > -1">
      <khyCreditAudit></khyCreditAudit>
    </section>

    <section>
      <nav class="common-nav mb20">
        <h2 style="width: 160px" class="common-nav__title tab_active">历史审核记录</h2>
      </nav>
      <BaseTable :columns="auditColumns" v-bind="historicalRecordTable" :pagination="false"> </BaseTable>
    </section>
    <CreditExtensionPop ref="CreditExtensionPop"></CreditExtensionPop>
    <OfflinePop ref="OfflinePop"></OfflinePop>
    <AuditPop ref="AuditPop"></AuditPop>
  </div>
</template>

<script>
import ApplyNote from '@/views/auditModel/components/ApplyNote.vue'
import CertificationInfo from '@/views/auditModel/components/CertificationInfo.vue'
import EnterpriseInfo from '@/components/EnterpriseInfo/index.vue'
import { HISTORY_AUDIT_STATUS, ORDER_STATUS_LIST, ORDER_STATUS } from '@/constants/auditModel.js'
import BaseTable from '@/components/BaseTable/index.vue'
import CreditExtensionPop from '../../components/CreditExtensionPop.vue'
import OfflinePop from '../../components/OfflinePop.vue'
import BaseSearch from '@/components/BaseSearch/index.vue'
import { FormTableMixin } from '@/mixins/form-table'
import http from '@/utils/request'
import AuditPop from '@/views/auditModel/platformAudit/components/AuditPop.vue'
import RiskControl from '@/components/RiskControl/index.vue'
import khyCreditAudit from '@/components/RiskControl/khyCreditAudit/index.vue'
function service(params) {
  if (this.$route.query.appCode === 'JFS') {
    return http
      .get('/orders', {
        params: { ...params, queryType: 1, queryId: this.$route.query.applyId },
      })
      .then(res => {
        return {
          data: res.records,
          total: res.total,
        }
      })
  }
}

export default {
  name: 'creditExtensionRecordDetail',
  components: {
    ApplyNote,
    CertificationInfo,
    EnterpriseInfo,
    BaseTable,
    BaseSearch,
    CreditExtensionPop,
    OfflinePop,
    AuditPop,
    RiskControl,
    khyCreditAudit,
  },
  mixins: [FormTableMixin(service)],
  data() {
    return {
      ORDER_STATUS,
      ORDER_STATUS_LIST,
      activeIndex: 0,
      navList: [
        { name: '申请单', id: 1 },
        { name: '认证信息', id: 2 },
        { name: '企业信息', id: 3 },
      ],
      applyInfo: {},
      enterpriseInfo: {},
      searchConfig: [{ component: 'select', prop: 'paymentStatus', label: '状态', options: ORDER_STATUS_LIST }],
      columns: [
        { label: '订单日期', prop: 'createdAt' },
        { label: '订单编号', prop: 'purOrderNumber' },
        { label: '供应商', prop: 'customerName' },
        { label: '采购商', prop: 'companyName' },
        {
          label: '状态',
          prop: 'paymentStatus',
        },
        { label: '订单金额', prop: 'salesTotalAmount' },
      ],
      historicalRecordTable: {
        data: [],
      },
      auditColumns: [
        { label: '受理时间', prop: 'createDate' },
        {
          label: '受理结果',
          prop: 'status',
          render: (val, row) => {
            return <span>{HISTORY_AUDIT_STATUS[row.status]}</span>
          },
        },
        { label: '原因描述', prop: 'rejectReason' },
        {
          label: '查看审核明细',
          render: (value, row) => {
            return row.status !== '2' && row.status !== '4' && row.status !== '7' ? (
              <el-button
                type="text"
                onClick={() => {
                  this.watch(row)
                }}>
                查看
              </el-button>
            ) : (
              ''
            )
          },
        },
      ],
      routeData: {},
      statusMap: {
        0: '已受理',
        2: '审核拒绝',
        3: '审核通过',
        4: '已过期',
        5: '已签约',
      },
    }
  },
  methods: {
    switchNav(item, index) {
      if (this.activeIndex === index) return
      this.activeIndex = index
    },
    watch(curItem) {
      const approve = 1
      if (curItem.status === '1' || curItem.status === '3') {
        this.$refs.CreditExtensionPop.show({
          isWatch: true,
          title: '查看审核明细',
          btnText: '返回',
          auditResult: approve,
          applyAmount: curItem.applyAmount,
          amount: curItem.amount,
          endDate: curItem.endDate,
          interestRate: curItem.interestRate,
          rejectReason: curItem.rejectReason,
        })
      } else if (curItem.status === '5') {
        this.$refs.OfflinePop.show({
          id: curItem.id,
          tenantName: curItem.uscName,
          discount: curItem.discount,
          accountNumber: curItem.accountNumber,
          accountName: curItem.accountName,
          title: '签约信息',
          btnText: '返回',
        })
      } else if (curItem.status === '6') {
        this.$refs.AuditPop.show({
          platformAuditRemark: curItem.rejectReason,
          discount: curItem.discount,
          auditResult: approve,
          isWatch: true,
          managerNo: curItem.managerNo,
        })
      }
    },
    async getDetailRequest() {
      const { userInfo, companyInfo, applyLogs } = await this.$http.get(`/credit_applys/${this.$route.query.applyId}`)
      this.applyInfo = userInfo
      this.enterpriseInfo = companyInfo
      this.historicalRecordTable.data = applyLogs
    },
  },
  mounted() {
    const routeData = this.$route.query.itemData && JSON.parse(this.$route.query.itemData)
    this.routeData = routeData
    this.getDetailRequest()
  },
}
</script>

<style lang="scss" scoped>
.detail {
  &-block {
    margin-bottom: 8px;
    &__title {
      font-size: $f-s-16;
      color: $gray;
      margin-bottom: 24px;
    }
  }
  .topKHYItem {
    margin-bottom: 20px;
    .el-col {
      margin-bottom: 10px;
    }
  }
  .topKHYItem {
    margin-bottom: 20px;
    .el-col {
      margin-bottom: 10px;
    }
  }
}
</style>
